<template>
  <div class="pointsdetails">
    <integralNav></integralNav>
    <div class="writing_right">
      <div class="TitleList">
        <div class="TitleList_padding pointsdetails_title">
          <div class="TitleList_top">
            <div class="pointsdetails_title_left">
              <div class="TitleList_top_title"><span></span>积分明细</div>
              <div class="TitleList_top_txt">
                <div class="top_txt_dd">
                  <div class="txt_dd_list" @click="changeTab(0)" :class="{ active: activeTab === 0 }">
                    积分全部流水
                  </div>
                  <div class="txt_dd_list" @click="changeTab(-1)" :class="{ active: activeTab === -1 }">
                    积分消耗记录
                  </div>
                  <div class="txt_dd_list" @click="changeTab(1)" :class="{ active: activeTab === 1 }">
                    积分增加记录
                  </div>
                </div>
              </div>
            </div>
            <div class="pointsdetails_title_right">
              <div class="title_right_dd">余额：<span>{{ $store.getters.memberInfo['point_num'] }}</span></div>
              <div class="title_right_dt">
                <a href="https://www.ai-dog.net/help/question/1.html" target="_blank" class="item">
                  <el-button><i class="el-icon-warning-outline"></i>使用说明</el-button>
                </a>
                <div class="right_dt_btn" @click="showWindow">充值积分</div>
              </div>
            </div>
          </div>
        </div>
        <div class="pointsdetails_content">
          <div class="allflow" v-loading="loading" element-loading-spinner="el-icon-loading"
					element-loading-text="拼命加载中" element-loading-background="rgba(255, 255, 255, 1)">
            <div class="allflow_content">
              <div class="allflow_content_list">
                <div class="content_list_li">积分变动</div>
                <div class="content_list_li">发生时间</div>
                <div class="content_list_li">剩余积分</div>

                <div class="content_list_li">备注</div>
                <!--  <div class="content_list_li">支付流水号</div>-->
              </div>
            </div>
            <div class="allflow_content">
              <div class="allflow_content_list" v-for="(info, index) in infos.data" :key="index">
                <div class="content_list_li">{{ info.num > 0 ? '+' : ''}}{{ info.num }}</div>
                <div class="content_list_li">{{ info.create_time }}</div>
                <div class="content_list_li">{{ info.end_num }}</div>
                <div class="content_list_li">{{ info.remarks }}</div>

                <!--  <div class="content_list_li">{{ info.order_id }}</div>-->
              </div>

              <div class="not_data not_data2" v-show="infos.data.length === 0">
                <div class="not_data_icon"><img src="@a/img/bg26.jpg"/></div>
                <div class="not_data_title">暂无数据</div>
              </div>
            </div>
            <div class="page">
              <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="infos.current_page"
                  :page-sizes="per_pages"
                  :page-size="infos.per_page"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="infos.total">
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 充值弹窗 -->
    <rechargeWindow v-if="rechargeShow" @close="rechargeShow = false"></rechargeWindow>
  </div>
</template>


<script>
import integralNav from "@c/common/integralNav/integralNav";
import rechargeWindow from "@c/common/rechargeWindow/rechargeWindow";

export default {
  name: "pointsDetails",
  data() {
    return {
      rechargeShow: false,
      rechargepoints: false,
      activeTab: 0,
      infos: {
        data: [],
        per_page: 10,
        current_page: 1,
        last_page: 1,
        total: 0
      },
      default_index: 0,
      can_swiper: false,
      per_pages: [10, 20, 30],
      rechargeList: [],
      amoney: 0,
      aintegral: 0,
      result: 0,
      images: require("@a/img/bn21.png"),
      loading: true,
    };
  },
  components: {
    integralNav, rechargeWindow
  },
  methods: {
    openProtocol() {
      window.open('https://www.ai-dog.net/serviceAgreement.html', '_blank');
    },
    showWindow(){
      let that = this;
      that.rechargeShow = true;

    },
    //分页
    handleSizeChange(val) {
      this.infos.per_page = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.infos.current_page = val
      this.getList()

    },
    handleChildClick(money, integral, images) {
      this.amoney = money
      this.aintegral = integral
      this.images = images
    },
    getList() {
      // loading 开始
      this.loading = true;

      let that = this;
      that.axios.get('/api/pointLog/list', {
        params: {
          page: that.infos.current_page,
          list_rows: that.infos.per_page,
          type: that.activeTab,
        }
      }).then(res => {
        // loading结束
        this.loading = false;

        that.infos = res.result;

      })
    },
    changeTab(i){
      this.activeTab = i;
      this.getList()
    },
    getProductList(){
      let that = this;
      that.axios.post('/api/products/getList').then(
          res => {
            if(res.code === 1){
              that.rechargeList = res.result;
              that.rechargeList.forEach( (item,index) => {
                if(item.is_recommend){
                  that.default_index = index
                }
              })
              let this_item = that.rechargeList[that.default_index]
              that.handleChildClick(this_item.money, this_item.integral, this_item.images)
              that.can_swiper = true
            }
          }
      )
    }
  },
  mounted() {
    this.result = Number(this.aintegral) + Number(this.balance);
  },
  created() {
    this.getList()
    this.getProductList()
  }
}
</script>

<style>
@import "pointsDetails.css";
</style>
